<template>
  <div
    class="drop-menu"
    v-if="menuDown"
    @touchmove.prevent
    ref="dropMenuWrap"
    @click="touchClick"
  >
    <div class="item-wrap">
      <ul v-for="(item, index) in categoriesDetailData" :key="item.id">
        <li
          class="title-item"
          @click="itemClick(index)"
          :class="{selected: currentTitle === index}"
        >
          {{item.name}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DropMenu',
  props: {
    categoriesDetailData: {
      type: Array,
      default: () => []
    },
    menuDown: {
      type: Boolean,
      default: false
    },
    currentTitle: {
      type: Number
    }
  },
  methods: {
    touchClick () {
      this.$emit('touchClick')
    },
    itemClick (index) {
      this.$emit('itemClick', index)
    }
  }
}

</script>
<style lang='scss' scoped>
.drop-menu {
  position: fixed;
  top: px2rem(98);
  bottom: px2rem(52);
  z-index: 50 !important;
  width: 100%;
  justify-content: flex-start;
  background-color: rgba(255, 255, 255, 0.6);
  .item-wrap {
    padding: px2rem(9);
    display: flex;
    flex-flow: row wrap;
    background-color: $text-color-white;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    .title-item {
      text-align: center;
      margin-right: px2rem(35);
      margin-top: px2rem(7);
      @include setWH(px2rem(61), px2rem(24));
      line-height: px2rem(24);
      @include setFontColor(px2rem(11), rgba(0, 0, 0, 0.7));
      border-radius: px2rem(18);
      border: 1px solid $text-color-pl;
    }
    .selected {
      background-color: rgba(60, 185, 99, 0.1);
      color: $theme-color-red;
      border: 1px solid $theme-color-red;
    }
  }
}
@keyframes animate {
  from {
    height: 0;
    top: 0;
  }
  to {
    height: 90%;
    top: 0;
  }
}
</style>
